<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

</body>
</html><!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>修改密码</title>
    <link rel="stylesheet" href="css/bootstrap.css">
    <!--=== Favicon ===-->
    <link rel="shortcut icon" href="img/favicon.ico" type="image/x-icon"/>


    <!-- All Vendor & plugins CSS include -->
    <link href="css/vendor.css" rel="stylesheet">
    <!-- Main Style CSS -->
    <link href="css/style.css" rel="stylesheet">

    <!--[if lt IE 9]>
    <script src="/oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
    <script src="/oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->

    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <style>
        form {
            margin-left: 470px;
            padding: 0;
            text-align: center;
        }

    </style>


</head>
<body>
<!-- Start Header Area -->
<header class="header-area">
    <!-- main header start -->
    <div class="main-header d-none d-lg-block">
        <!-- header top start -->
        <div class="header-top bdr-bottom">
            <div class="container">
                <div class="row align-items-center">
                    <div class="col-lg-6">
                        <div class="welcome-message">
                            <p>欢迎光临花语在线订花系统</p>
                        </div>
                    </div>
                    <div class="col-lg-6 text-right">
                        <div class="header-top-settings">
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- header top end -->

        <!-- header middle area start -->
        <div class="header-main-area sticky">
            <div class="container">
                <div class="row align-items-center position-relative">

                    <!-- start logo area -->
                    <div class="col-lg-3">
                        <div class="logo">
                            <a href="index.html">
                                <h2> HUA YU </h2>
                            </a>
                        </div>
                    </div>
                    <!-- start logo area -->

                    <!-- main menu area start -->
                    <div class="col-lg-6 position-static">
                        <div class="main-menu-area">
                            <div class="main-menu">
                                <!-- main menu navbar start -->
                                <nav class="desktop-menu">
                                    <ul>
                                        <li><a href="index.html">主页</a></li>
                                        <li><a href="store.html">查看商家</a></li>
                                        <li><a href="shopping.html">查看购物车</a></li>
                                    </ul>
                                </nav>
                                <!-- main menu navbar end -->
                            </div>
                        </div>
                    </div>
                    <!-- main menu area end -->

                    <!-- mini cart area start -->
                    <div class="col-lg-3">
                        <div class="header-configure-wrapper">
                            <div class="header-configure-area">
                                <ul class="nav justify-content-end">
                                    <li class="user-hover">
                                        <a href="#" title="个人中心">
                                    <li><img src="{{result.store.simg}}" style="width: 60px" height="60px"></li>
                                    </a>
                                    </li>
                                    <li>
                                        <a href="#">
                                            <h4>退出</h4>
                                        </a>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                    <!-- mini cart area end -->

                </div>
            </div>
        </div>
        <!-- header middle area end -->
    </div>
    <!-- main header start -->
</header>
<!-- end Header Area -->

<!-- main wrapper start -->
<main>
    <!-- breadcrumb area start -->
    <div class="breadcrumb-area common-bg">
        <div class="container">
            <div class="row">
                <div class="col-12">
                    <div class="breadcrumb-wrap">
                        <nav aria-label="breadcrumb">
                            <h1>商家</h1>
                            <br>
                        </nav>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- breadcrumb area end -->
</main>
<div class="container" id="container">
    <form class="form-inline" role="form">
        <input type="hidden" id="sid" v-model="sid">
        <div class="form-group">
            <label for="password">请输入原始密码:</label>
            <input type="text" class="form-control" id="password" name="password" @blur="password_one()"
                   v-model="tt.password"><br/>
            <span id="span1"></span>
            <br/><br/><br/>
            <span id="span">密码要求英文、数字、下划线最少6位</span>
            <label for="password1">请输入新密码:</label>
            <input type="text" class="form-control" id="password1" name="password1" @blur="password_two()"
                   v-model="tt.password1"><br/>
            <span id="span2"></span>
            <br/><br/><br/>
            <label for="password2">请确认新密码:</label>
            <input type="text" class="form-control" id="password2" name="password2" @blur="password_three()"
                   v-model="tt.password2"><br/>
            <span id="span3"></span>
            <br/><br/><br/>

            <button type="button" class="btn btn-info" @click="save_password()">确认保存</button>
        </div>
    </form>
</div>
</body>
<script src="js/jquery-3.2.1.js"></script>
<script src="js/vue.js"></script>
<script src="js/axios.min.js"></script>
<script src="js/global.js"></script>
<script src="js/layer/layer.js"></script>
<script>
    var app = new Vue({
        el: '#container',
        data: {
            sid: 1,
            result: {
                store: {}
            },
            tt: {}
        },
        methods: {
            query_store: function () {
                axios.get(base_url + 'store/query_Store.do/' + this.sid).then(function (res) {
                    app.result.store = res.data.data;
                    // app.tt.password = res.data.data.password;
                })
            },
            password_one: function () {
                if ((app.result.store.password == app.tt.password)) {
                    $('#span1').html("密码正确")
                } else {
                    $('#span1').html("密码有误")
                }
            },
            password_two: function () {
                if ((/^\w{6,12}$/.test(this.tt.password1)) && (this.tt.password1 != '' || this.tt.password1 != null)) {
                    $('#span2').html("密码可以使用")
                } else {
                    $('#span2').html("密码不合规范")
                }
            },
            password_three: function () {
                if (this.tt.password1 == this.tt.password2) {
                    $('#span3').html("两次密码一致")
                } else {
                    $('#span3').html("两次密码不一致")
                }
            },
            save_password: function () {
                if ((app.tt.password == null || app.tt.password == '') || (app.tt.password1 == null || app.tt.password1 == '') || (app.tt.password2 == null || app.tt.password2 == '')) {
                    layer.msg("内容为空")
                } else {
                    axios.post(base_url + 'store/update_storePs.do', {
                        sid: app.sid,
                        password: this.tt.password2
                    }).then(function (res) {

                        if (res.data.code == 200) {
                            layer.msg(res.data.msg, {icon: 1, time: 500}, function () {
                                location.href = "store_personal.html";
                            })
                        } else {
                            layer.msg(res.data.msg, {icon: 2, time: 500})
                        }
                    })
                }
            }
        },
        mounted: function () {
            this.query_store();
        }
    })
</script>
</html>